import React, { useState, useEffect } from 'react';

import { Descriptions } from 'antd';
import { Menu, Tabs, Card } from 'antd';
import {
  BgColorsOutlined,
  AppstoreOutlined,
  SettingOutlined,
} from '@ant-design/icons';

import Gradual from './component/Gradual';
import Opacity from './component/Opacity';
import AnimationCard from './component/AnimationCard';

const { SubMenu } = Menu;

import styles from './index.less';

const { TabPane } = Tabs;
const { Meta } = Card;

const img = require('@/assets/img/1.jpg');

export default function Skill(props) {
  let { routes, location } = props;
  const [current, setCurrent] = useState(0);

  return (
    <>
      <div className={styles.wrap}>
        <Tabs defaultActiveKey="1">
          <TabPane tab="CSS" key="1">
            <div className={styles.css_wrap}>
              <Gradual />
              <Opacity />
              <AnimationCard />
            </div>
          </TabPane>
          <TabPane tab="JS" key="2">
            Js
          </TabPane>
        </Tabs>
      </div>
    </>
  );
}
